<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adBox {
            width: 300px;
            height: 400px;
            background-color: #6ff;
            position: fixed;
            right: 5px;
            bottom: 5px;
            display: none;
        }

        .search {
            width: 400px;
            height: 40px;
            display: block;
            margin: 50px auto;
            outline: none;
        }
    </style>
</head>

<body>
    <!-- <div class="adBox"></div> -->
    <input type="text" class="search">
</body>
<script>
    // 延时器  -> 延迟一段时间,执行既定的内容  (注意:计时器只要不清除会一直执行,延时器默认只在执行一次)

    // 设置延时器
    // setTimeout(callback,delayTime,arg1,arg2...argN)
    // callback  延迟一段时间执行的内容(回调函数)
    // delayTime 延迟的时间(单位毫秒)

    // 返回值: 延时器的编号      

    // 注意:如果传入的函数需要接收参数,从第三参数开始依次向后传

    // 清除延时器
    // clearTimeout(延时器的编号)  


    // 延时器典型应用:
    // 1. 延迟指定时间执行既定的操作
    // 2. 函数防抖 -> 短时间内重复触发多次只执行最后一次
    // 3. 延时器改计时器


    // 需求: 
    // 每隔5s -> 启动5s倒计时   

    // 计时器嵌套计时器  (外层计时没5s执行一次  内层计时器5s倒计时结束)
    // var timer1 = setInterval(function(){
    //     var num = 5;
    //     console.log("开始倒计时:",num);
    //     var timer2 = setInterval(function(){
    //         num--;
    //         console.log("开始倒计时:",num);
    //         if(num == 1){
    //             clearInterval(timer2);
    //         }
    //     },1000)
    // },5000)


    // 需求: 
    // 每隔2s -> 启动5s倒计时  -> 计时器结束 -> 在间隔2s ->  启动5s倒计时 

    // 计时器嵌套计时器  (外层计时每2s执行一次  内层计时器5s倒计时结束) => 外层计时器不会等待内层计时器结束 而是直接启动下一次
    //  var timer1 = setInterval(function(){
    //     var num = 5;
    //     console.log("开始倒计时:",num);
    //     var timer2 = setInterval(function(){
    //         num--;
    //         console.log("开始倒计时:",num);
    //         if(num == 1){
    //             clearInterval(timer2);
    //         }
    //     },1000)
    // },2000);

    // 延时器改计时器
    var timer = null;  //全局变量记录延时器的编号 => 用于清除延时器
        
    loop();


    function loop(){
        // 延迟两秒启动
        clearTimeout(timer); //每次启动下一个之前清除上一个 -> 防止重复启动多个
        timer = setTimeout(function () {
            // 倒计时十秒
            var num = 5;
            console.log("开始倒计时:", num);
            var timer2 = setInterval(function () {
                num--;
                console.log("开始倒计时:", num);
                if (num == 1) {
                    clearInterval(timer2);
                    loop(); // 倒计时5s结束后再启动下一次
                }
            }, 1000);

            // loop(); // 不管计时器是否结束 -> 递归执行下一次
        }, 2000);
    }


    // function fn(){
    //     console.log(1111);
    //     fn();
    // }
    // fn()




</script>

</html>